.layoutcenter {
    margin: auto;
    width: 1161px;
    min-width: 1000px;
    min-height: 600px;
}

.canvas_my_painter {
    //border: 1px solid blue;
    //position: relative;
    margin: auto;
    width: 1000px;
    min-width: 1000px;
    height: 600px;
    overflow: scroll;
    background: #e5e5e5;
    z-index: 100;
    //position: relative;
    //background:url(../img/ff.jpg) no-repeat center;
    .rect {
        position: absolute;
        border: 1px solid red;
        width: 0;
        height: 0;
        left: 0;
        top: 0;
        overflow: hidden;
    }

    .abellipse {
        width: 1px;
        height: 1px;
        background: red;
        position: absolute;
        //border: 1px solid red;
        z-index: 10;
    }

    .abellipse_1 {
        width: 1px;
        height: 1px;
        background: transparent;
        position: absolute;
        //border: 1px solid red;
    }
}

.event_canvas {
    margin: 10px auto;
    //border: 1px solid;
}

.uptoolbar {
    background: #292929;
    height: 110px;
    width: 1000px;
}

.lefttoolbar {
    background: #292929;
    height: 575px;
    width: 80px;
    //padding-top: 25px;
    position: absolute;
    display: table;
    //left: -10%;
    .lefttoolbar_1 {
        //height: 575px;
        display: table-cell;
        vertical-align: middle;
    }
}

.bottomtoolbar {
    background: #292929;
    height: 100px;
    position: fixed;
    width: 100%;
    bottom: 0;
}

.bottomwaper {
    position: relative;
    margin: auto;
    width: 1000px;
    min-width: 1000px;
}

.button-group {
    //border: 1px solid red;
    margin: auto;
    //text-align: center;
    //border: 1px solid blue;
    //width: 700px;
    button {
        border: 0 solid blue;
        margin: 20px;
        //padding: 5px 30px;
        border-radius: 3px;
    }

    .icon-group {
        display: inline-block;
    }

    .fill_rect {
        background: url("img/topbar.png") no-repeat center;
        width: 60px;
        height: 70px;
        background-position: 0 0;

        &:hover {
            background: url("img/topbarh.png") no-repeat center;
            width: 60px;
            height: 70px;
            background-position: 0 0;
            cursor: pointer;
        }
    }

    .cur_rect {
        background: url("img/topbarh.png") no-repeat center;
        width: 60px;
        height: 70px;
        background-position: 0 0;
        cursor: pointer;
    }

    .fill_ellipse {
        background: url("img/topbar.png") no-repeat center;
        width: 60px;
        height: 70px;
        background-position: -70px 0;

        &:hover {
            background: url("img/topbarh.png") no-repeat center;
            width: 60px;
            height: 70px;
            background-position: -70px 0;
            cursor: pointer;
        }
    }

    .cur_ellipse {
        background: url("img/topbarh.png") no-repeat center;
        width: 60px;
        height: 70px;
        background-position: -70px 0;
        cursor: pointer;
    }

    .fill_line {
        background: url("img/topbar.png") no-repeat center;
        width: 60px;
        height: 70px;
        background-position: -140px 0;

        &:hover {
            background: url("img/topbarh.png") no-repeat center;
            width: 60px;
            height: 70px;
            background-position: -140px 0;
            cursor: pointer;
        }
    }

    .cur_line {
        background: url("img/topbarh.png") no-repeat center;
        width: 60px;
        height: 70px;
        background-position: -140px 0;
        cursor: pointer;
    }

    .fill_text {
        background: url("img/topbar.png") no-repeat center;
        width: 60px;
        height: 70px;
        background-position: -210px 0;

        &:hover {
            background: url("img/topbarh.png") no-repeat center;
            width: 60px;
            height: 70px;
            background-position: -210px 0;
            cursor: pointer;
        }
    }

    .cur_text {
        background: url("img/topbarh.png") no-repeat center;
        width: 60px;
        height: 70px;
        background-position: -210px 0;
        cursor: pointer;
    }

    .reset_pre {
        background: url("img/topbar.png") no-repeat center;
        width: 60px;
        height: 70px;
        background-position: -280px 0;

        &:hover {
            background: url("img/topbarh.png") no-repeat center;
            width: 60px;
            height: 70px;
            background-position: -280px 0;
            cursor: pointer;
        }
    }

    .resume {
        background: url("img/topbar.png") no-repeat center;
        width: 60px;
        height: 70px;
        background-position: -350px 0;

        &:hover {
            background: url("img/topbarh.png") no-repeat center;
            width: 60px;
            height: 70px;
            background-position: -350px 0;
            cursor: pointer;
        }
    }

    .reset {
        background: url("img/topbar.png") no-repeat center;
        width: 60px;
        height: 70px;
        background-position: -420px 0;

        &:hover {
            background: url("img/topbarh.png") no-repeat center;
            width: 60px;
            height: 70px;
            background-position: -420px 0;
            cursor: pointer;
        }
    }

    .zoomIn {
        background: url("img/toolbar1.png") no-repeat center;
        width: 40px;
        height: 70px;
        background-position: 0 0;

        &:hover {
            background: url("img/toolbar1h.png") no-repeat center;
            width: 40px;
            height: 70px;
            background-position: 0 0;
            cursor: pointer;
        }
    }

    .zoomOut {
        background: url("img/toolbar1.png") no-repeat center;
        width: 40px;
        height: 70px;
        background-position: -70px 0;

        &:hover {
            background: url("img/toolbar1h.png") no-repeat center;
            width: 40px;
            height: 70px;
            background-position: -70px 0;
            cursor: pointer;
        }
    }

    .turn_left {
        background: url("img/toolbar1.png") no-repeat center;
        width: 40px;
        height: 70px;
        background-position: -140px 0;

        &:hover {
            background: url("img/toolbar1h.png") no-repeat center;
            width: 40px;
            height: 70px;
            background-position: -140px 0;
            cursor: pointer;
        }
    }

    .turn_right {
        background: url("img/toolbar1.png") no-repeat center;
        width: 40px;
        height: 70px;
        background-position: -210px 0;

        &:hover {
            background: url("img/toolbar1h.png") no-repeat center;
            width: 40px;
            height: 70px;
            background-position: -210px 0;
            cursor: pointer;
        }
    }

    .turn {
        background: url("img/toolbar1.png") no-repeat center;
        width: 40px;
        height: 70px;
        background-position: -280px 0;

        &:hover {
            background: url("img/toolbar1h.png") no-repeat center;
            width: 40px;
            height: 70px;
            background-position: -280px 0;
            cursor: pointer;
        }
    }

    .save {
        //float: right;
        color: #054fbd;
        background: #f5f5f5;
        width: 140px;
        height: 40px;
        margin: 30px 0;
        position: absolute;
        right: 0;

        &:hover {
            background: #fff;
            cursor: pointer;
        }
    }

    .close {
        background: url("img/close.png") no-repeat center;
        width: 32px;
        height: 32px;
        float: right;

        &:hover {
            background: url("img/closeh.png") no-repeat center;
            width: 32px;
            height: 32px;
            cursor: pointer;
        }
    }
}

.canvas_my_input {
    display: none;
    position: absolute;
    //background: transparent;
}

.load_img {
    //background:url(../img/ff.jpg) no-repeat center;
}

.bodybg {
    background: #000;
}
